<template>
  <div class="main-wrapper">
    <ClientTitleBar :title="titleRef"/>
    <div class="app-wrapper">
      <NavBar />
      <div class="right-box">
        <TopBar />
        <div class="content">
          <router-view v-slot="{ Component }">
            <transition
              name="custom-classes"
              type="animation"
              enter-active-class="animate__animated animate__fadeIn"
            >
              <KeepAlive :include="keepAlivesRef">
                <component :is="Component" />
              </KeepAlive>
            </transition>
          </router-view>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import 'animate.css';
import { watch, ref, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import NavBar from './components/NavBar.vue';
import TopBar from './components/TopBar.vue';
import ClientTitleBar from './components/ClientTitleBar/index.vue'
import routes from './router/routes';
import { initAllDB } from '../src/db/index.js';
import isClientApp from './util/isClientApp.js'


// 缓存组件
const keepAlivesRef = ref([]);
const nextKeep = (sources) => {
  for (let i = 0; i < sources.length; i++) {
    if (sources[i].children && sources[i].children.length) {
      nextKeep(sources[i].children);
    } else {
      if (sources[i].meta && sources[i].meta.keepAlive) {
        keepAlivesRef.value.push(sources[i].name);
      }
    }
  }
};
nextKeep(routes);

const route = useRoute();

const titleRef = ref('记事本');

watch(route, (newRoute) => {
  const routeTitle = newRoute.meta.title;
  if (newRoute.meta.isEdit) {
    titleRef.value = newRoute.query.id
      ? `编辑${routeTitle}`
      : `新增${routeTitle}`;
  } else {
    titleRef.value = routeTitle;
  }
});

onMounted(() => {
  // 初始化所有db 表
  initAllDB();
  // 如果是浏览器时候设置title-bar-height为0
  if (!isClientApp()) {
    const appDom = document.querySelector('.app');
    appDom.style.setProperty('--title-bar-height', '0px');
  }
});
</script>
<style scoped lang="less">
.main-wrapper {
  height: 100vh;
  .app-wrapper {
    display: flex;
    width: 100vw;
    height: calc(100% - var(--title-bar-height));
    .right-box {
      width: calc(100vw - 180px);
      height: 100%;
      .content {
        height: calc(100% - 62px);
        overflow-y: auto;
        border-top-left-radius: 16px;
        background-color: #f7f6fb;
        padding: 20px;
        box-sizing: border-box;
        /* 隐藏滚动条的样式 */
        &::-webkit-scrollbar {
          display: none;
        }
      }
    }
  }
}
</style>
